﻿<div class="block center">
    <h2>Websocket Chat</h2>
    <div class="inputBlock center">
        <input type="text" id="msg">
        <input class="button" id="broadcast" type="button" value="Send">
        <ul id="messages"></ul>
    </div>
</div>

@section scripts
{
    <script type="text/javascript">
    	$(document).ready(function () {

    		var username = prompt('Please enter a username:');

    		if (window.WebSocket) {
    			var uri = 'ws://' + window.location.hostname + window.location.pathname.replace('WebSocket', 'api/Chat') + '?username=' + username;

    			var websocket = new WebSocket(uri);

    			websocket.onopen = function () {
    				$('#messages').append('<li>Connected.</li>');

    				$('#broadcast').click(function (event) {
    					websocket.send($('#msg').val());
    					$('#msg').val('');
    					event.preventDefault();
    				});
    			};

    			websocket.onerror = function (event) {
    				$('#messages').append('<li>ERROR</li>');
    			};

    			websocket.onmessage = function (event) {
    				$('#messages').append('<li>' + event.data + '</li>');
    			};
    		} else {
    			$("#messages").html("Din browser understøtter ikke WebSocket");
    		}
    	});
    </script>
}